<template>
	<div class="h-100%">
		<div class="page">
			<div class="p-10 system-page-background b-radius-4">
				<my-form inline query label-width="70px" :model="queryParams" :form-item="queryFormItem" :search-fn="() => refTable.reload()" />
			</div>
			<div class="flex-auto flex-col system-page-background m-t-10 b-radius-4">
				<div v-hasPermi="['system:dict:add', 'system:dict:remove', 'system:dict:export']" class="p-10">
					<el-button v-hasPermi="['system:dict:add']" type="primary" icon="Plus" @click.prevent="insertFn">新增</el-button>
					<el-button-group>
						<my-button-export v-hasPermi="['system:dict:export']" :load="Export" :disabled="!state.list.length" />
					</el-button-group>
					<el-button
						v-hasPermi="['system:dict:remove']"
						type="danger"
						:disabled="!tableSelection.length"
						icon="Delete"
						@click.prevent="deleteFn(tableSelection)"
					>
						删除
					</el-button>
				</div>
				<my-list-panel ref="refTable" :load-fn="loadData" :total="state.total">
					<my-table :data="state.list" :columns="state.columns" @selection-change="(val) => (tableSelection = val)">
						<template #status="{ row }">
							<el-switch
								v-model="row.status"
								inline-prompt
								:active-value="0"
								:inactive-value="1"
								active-text="启"
								inactive-text="停"
								@change="statusFn(row)"
							/>
						</template>
						<template #default="{ row }">
							<my-button-text v-hasPermi="['system:dict:edit']" @click.prevent="updateFn(row)">修改</my-button-text>
							<my-button-text @click.prevent="DetailFn(row)">详情</my-button-text>
						</template>
					</my-table>
				</my-list-panel>
			</div>

			<!-- 添加或修改参数配置对话框 -->
			<el-dialog v-model="dialog.open" :title="dialogTitle" width="600px" append-to-body @closed="resetForm(form)">
				<my-form
					ref="refDialogForm"
					label-width="80px"
					:model="dialog.form"
					:form-item="[
						{ prop: 'dictName', label: '字典名称', required: true },
						{ prop: 'dictType', label: '字典类型', required: true },
						{ prop: 'status', label: '状态' },
						{ prop: 'remark', label: '备注', type: 'textarea' }
					]"
					class="validate--bottom"
				>
					<template #status>
						<el-radio-group v-model="dialog.form.status">
							<el-radio v-for="dict in $store.dict.sysNormalDisable" :key="dict.dictValue" :label="dict.dictValue * 1">
								{{ dict.dictLabel }}
							</el-radio>
						</el-radio-group>
					</template>
				</my-form>
				<template #footer>
					<el-button @click.prevent="dialog.open = false">取消</el-button>
					<el-button type="primary" @click.prevent="dialogSubmitFn()">确定</el-button>
				</template>
			</el-dialog>
		</div>

		<!-- 详情组件 -->
		<el-drawer v-model="drawer" title="字典管理详情" size="900px" append-to-body destroy-on-close>
			<Details :router-mage="routerMage" />
		</el-drawer>
	</div>
</template>

<script setup name="system/dict">
import Details from './data.vue';
import { pageTypedict, addTypedict, removeTypedict, editTypedict, exportTypedict } from '@/api/system';
import { downloadBlob } from '@/utils/download';

/******************************字典数据************************************* */
$store.dict.GETsysNormalDisable();

/******************************表格增删改查************************************* */
const queryFormItem = [
		{ prop: 'likeDictName', label: '字典名称' },
		{ prop: 'likeDictType', label: '字典类型' },
		{
			itemType: 'select',
			prop: 'status',
			label: '状态',
			list: $store.dict.sysNormalDisable
		},
		{
			itemType: 'date',
			prop: 'dateRange',
			label: '创建时间',
			type: 'datetimerange',
			rangeSeparator: '至',
			startPlaceholder: '开始日期',
			endPlaceholder: '结束日期',
			prepend: 'CreateTime'
		}
	],
	columns = [
		{
			type: 'selection'
		},
		{
			label: '字典名称',
			prop: 'dictName',
			width: 150
		},
		{
			label: '字典类型',
			prop: 'dictType',
			width: 160
		},
		{
			label: '状态',
			prop: 'status',
			width: 100
		},
		{
			label: '备注',
			prop: 'remark',
			'show-overflow-tooltip': true
		},
		{
			label: '创建时间',
			prop: 'createTime',
			width: 160
		},
		{
			label: '操作',
			width: 120
		}
	];

const { queryParams, state, refTable, tableSelection, refDialogForm, dialog, dialogTitle, loadData, insertFn, deleteFn, updateFn, dialogSubmitFn } =
	pageMixin({
		queryFormItem,
		columns,
		api: {
			page: pageTypedict,
			remove: removeTypedict,
			add: addTypedict,
			edit: editTypedict
		},
		dialogDefault: {
			title: '字典',
			form: {
				id: undefined,
				status: 0
			}
		}
	});

/**
 * 启用、停用
 */
function statusFn(row) {
	if (row.id) {
		const text = row.status === 0 ? '启用' : '停用';
		confirmFn(`确认要—${text}（${row.dictName}）字典吗?`)
			.then(() => editTypedict(row))
			.then(() => {
				msgSuccess(text + '成功');
			})
			.catch(() => {
				row.status = row.status === 0 ? 1 : 0;
				msgInfo('已取消！');
			});
	}
}

/**
 * 导出按钮操作
 * */
function Export() {
	return exportTypedict().then((data) => {
		downloadBlob(data, '字典管理.xlsx');
	});
}

/**
 * 字典数据详情
 *  */
const routerMage = ref({}),
	drawer = ref(false);
function DetailFn(row) {
	drawer.value = true;
	routerMage.value = {
		name: 'detail',
		dictType: row.dictType
	};
}
</script>
